
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>抽奖</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}

		ul{
			width: 360px;
			margin: 0 auto;
			margin-top: 100px;
		}

		ul li{
			list-style: none;
			width: 100px;
			height: 100px;
			background: red url() 0 0 no-repeat;
			float: left;
			margin: 10px;
			font-size: 20px;
			color: #fff;
			text-align: center;
			line-height: 100px;
			font-family: "微软雅黑";
			cursor: pointer;
		}
		#start{
			font-size: 30px;
		}

	</style>
	<script type="text/javascript">
		window.onload = function  () {
			// 捉开始按钮
			start = document.getElementById("start");
			//捉要走的奖项
			run1 = document.getElementsByClassName('run1');

			//定义要走的顺序
			arr = [0,1,2,4,7,6,5,3];

			//定义每次走的下标
			num=0;
			//定义走的次数
			cn=0;
			//定义开始每次走的时间间隔 
			time = 50;

			function run () {
				console.log("time:"+time+"cn:"+cn+"num:"+num);
				//把所有奖项变红
				for (var i = 0; i < run1.length; i++) {
					run1[i].style.backgroundColor="red";
				};

				//根据num取需要变蓝的奖项
				run1[arr[num]].style.backgroundColor="blue";

				// 次数递增
				cn++;

				//大于50才进行时间变慢
				if(cn>50){
					time+=10;
				}

				//次数到达随机产生的数抽奖结束
				if(cn==end){
					is_run=true;
					alert("恭喜你中了："+run1[arr[num]].innerHTML);
				}else{
					//重复走抽奖
					setTimeout(run, time);
				}

				// 走到最后一天重新来
				if(num==7){
					num=0;
				}else{
					num++;
				}
			}

			is_run = true;
			start.onclick = function  () {
				if(is_run){
					num=0;
					cn=0;
					time = 50;
					end = Math.floor(Math.random()*(86-70)+70);
					console.log(end);
					run();
					is_run = false;
				}
				
			}

			

			
		}
	</script>
</head>
<body>
	<ul>
		<li class="run1">二等奖</li>
		<li class="run1">三等奖</li>
		<li class="run1">一等奖</li>
		<li class="run1">三等奖</li>
		<li id="start">开始</li>
		<li class="run1">再来一次</li>
		<li class="run1">二等奖</li>
		<li class="run1">三等奖</li>
		<li class="run1">再来一次</li>
	</ul>
</body>
</html>